<template>
    <div class="verification f-cb">
        <!-- <open-account-pregress v-if="isModify==1"></open-account-pregress> -->
        <div class="verification_title">{{$t('m.Continuetoopen')}}</div>
        <div class="verification_con">
            <span>{{$t('m.text22')}}</span>
        </div>
        <ul class="verification_list f-cb">
            <li>
                <h2 class="ico1">{{$t('m.text16')}}</h2>
                <div class="fonts">
                    <span>{{$t('m.text23')}}</span>
                </div>
            </li>
            <li>
                <h2 class="ico2">{{$t('m.text24')}}</h2>
                <dl v-if="listInfo.page_info">
                    <dd v-if="listInfo.page_info.branch.local && (legalizeType == '' || legalizeType == 2)" @click="LinkClick(2)">
                        <span class="box">
                            <div class="ddTitle">{{$t('m.Verifyidentityonline')}}</div>
                            <div class="ddcongt">{{$t('m.Hold')}}{{userType==2?$t('m.hk'):$t('m.overseas')}}{{$t('m.text25')}}</div>
                        </span>
                    </dd>
                    <dd v-if="listInfo.page_info.branch.web && (legalizeType == '' || legalizeType == 3)" @click="LinkClick(3)">
                        <span class="box">
                            <div class="ddTitle">{{$t('m.Counterverifyidentity')}}</div>
                            <div class="ddcongt">{{$t('m.text21')}}</div>
                        </span>
                    </dd>
                </dl>
            </li>
        </ul>
        <div class="mainLandBtns f-cb">
            <span class="return" @click="returnLinks">{{$t('m.Previousstep')}}</span>
        </div>
    </div>
</template>
<script>
    import {pageFlow,BtnsFlow,uploads,submit,getsubscript} from "@/common/common";
    import openAccountPregress from "@/components/assembly/openAccountProgress.vue";
    export default {
        components: {openAccountPregress},
        data() {
            return{
                IsSubmit:true,//判断是否资料提交
                IsIdentity:1,//判断是什么身份 1 网上核实身份 2 柜台核实身份
                listInfo:{},
                legalizeType:'',
                num:0,
            }
        },
        computed:{
            flowInfo(){
                return JSON.parse(sessionStorage.getItem('flowInfo'))
            },
            userType(){
                return JSON.parse(sessionStorage.getItem('userType'))
            },
            isModify(){
                return Number(sessionStorage.getItem('isModify'))
            }
        },
        mounted(){
            this.$nextTick(function(){
                this.num = getsubscript(this.flowInfo)
                console.log()
                this.getflow(this.flowInfo.page_flow[this.num])
                window.document.title = this.$t('m.verification')
            })
            
        },
        methods:{
            getflow(page){
                pageFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        this.listInfo =  res.data;
                        this.legalizeType = res.data.user_fill.legalizeType?res.data.user_fill.legalizeType:''
                        
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else if(res.code == 102 || res.code == 103){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            LinkClick(type){
                var _this = this;
                _this.$axios.post('/open/identity',{
                    legalizeType:type,
                })
                .then(function (res) {
                    var res = res.data
                    if(res.code == 1){
                        sessionStorage.setItem('legalizeType',type);
                        console.log(res.data.isExists)
                        if(res.data.isExists){
                            _this.BtnsFlowBtn(_this.flowInfo.page_flow[_this.num + 1])
                        }else{
                            if(type == 2){
                                _this.$router.replace({ path:'/OnlineAddress'});
                            }else{
                                _this.$router.replace({ path:'/CounterAddress'}); 
                            }
                        }
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            returnLinks(){
                var _this = this;
                console.log(this.flowInfo.page_info.id,this.flowInfo.page_flow[0],this.num,'上一步')
                if(this.flowInfo.page_info.id == this.flowInfo.page_flow[0]){
                    if(Number(sessionStorage.getItem('isModify')) == 1){
                        _this.$router.replace({ path:'/examine'});
                    }else{
                        _this.$router.replace({ path:'/documentType'});
                    }
                }else{
                    _this.BtnsFlowBtn(this.flowInfo.page_flow[this.num - 1])
                }
            },
            BtnsFlowBtn(page){
                var _this = this;
                BtnsFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        if(res.data.page_info.type==2){
                            _this.$router.replace({ path:'/custom?id='+res.data.page_info.id});
                        }else{
                            _this.$router.replace({ path:'/'+res.data.page_info.url_path});
                        }
                    }else if(res.code == 102){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else if(res.code == 401){
                         _this.$router.replace({path:'/'})
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
        },
        watch:{

        },
    }
</script>

<style lang="less">
    .verification{
        width: 460px;
        position: relative;
        margin:0 auto;
        padding-top: 40px;
        .verification_title{
            font-size: 20px;
            font-weight: bold;
            line-height: 36px;
        }
        .verification_con{
            font-size: 14px;
            color: @titleColor;
            line-height:23px;
        }
        .verification_list{
            padding-top: 21px;
            li{
                width: 100%;
                padding-bottom: 20px;
                h2{
                    padding-left: 31px;
                    font-size: 16px;
                    color: @404040;
                    line-height: 35px;
                    background-size: 20px auto;
                    background-repeat: no-repeat;
                    background-position: left 7px;
                }
                h2.ico1{
                    background-image: url(~@/assets/examine05.png);
                }
                h2.ico2{
                    background-image: url(~@/assets/examine06.png);
                }
                .fonts{
                    font-size: 16px;
                    color: @titleColor;
                    padding-left: 43px;
                    line-height: 33px;
                }
                dl{
                    padding-top: 10px;
                    width: 100%;
                    dd{
                        margin: 0;
                        margin-top: 20px;
                        padding:20px 17px 20px 19px;
                        background: url(~@/assets/examine07.png) no-repeat center;
                        background-size: 100% 100%;
                        border-radius:3px;
                        overflow: hidden;
                        cursor: pointer;
                        transition: all 0.3s;
                        .box{
                            padding-right: 15px;
                            display: block;
                            background: url(~@/assets/examine08.png) no-repeat right center;
                            background-size: 10px auto;
                        }
                        .ddTitle{
                            font-size: 20px;
                            color: @fff;
                            line-height:30px;
                        }
                        .ddcongt{
                            font-size: 14px;
                            color: @fff;
                            line-height:24px;
                        }
                    }
                    dd:hover{
                        opacity: 0.8;
                    }
                }
                .divBox{
                    width: 100%;
                    padding:9px 0;
                    margin-top: 30px;
                    border-top:1px solid @e7e6eb;
                    border-bottom:1px solid @e7e6eb;
                    cursor: pointer;
                    .BoxTitle{
                        font-size: 20px;
                        color: @000;
                        line-height:40px;
                        a{font-size: 14px;}
                    }
                    p{
                        font-size: 14px;
                        color: @titleColor;
                        line-height: 21px;
                        padding:7px 0;
                    }
                }
            }
        }
        .mainLandBtns{
            width: 100%;
            text-align: center;
            font-size: 0;
            margin-top: 20px;
            span{
                cursor: pointer;
                width:400px;
                height: 36px;
                line-height: 36px;
                border-radius:3px;
                display: block;
                margin:0 auto;
                text-align: center;
                font-size: 14px;
                transition: opacity 0.3s;

            }
            span:hover{
                opacity: 0.8;
            }
            span.return{
                background: @e7e6eb;
                color: @000;
            }
            span.next{
                background: @hoverColor;
                color: @fff;
            }
        }
    }
</style>